<template>  
	<view class="container">  
	    <view class="back-button" @click="goBack"></view>   
	    <image class="music-sheet-image" :src="musicSheetImage" mode="aspectFit"></image>    
	    <view class="favorite-icon" @click="toggleFavorite">  
	      <image :src="isFavorite ? '/static/collect.png' : '/static/collect(1).png'" mode="aspectFit"></image>  
	    </view>
<!-- 		    <view v-for="score in musicScores" :key="score.id">  
		      <text>{{ score.name }}</text>  
		      <button @click="addToFavorites(score)" :class="{'is-favorited': isFavorited(score.id)}">  
		        {{ isFavorited(score.id) ? '取消收藏' : '收藏' }}  
		      </button>  
		    </view> --> 
	</view>  
</template>

<script>  
export default {  
  data() {  
    return {  
      musicSheetImage: 'http://localhost:8080/musicPage/songpages/2',   
      isFavorite: false,   
    };  
  },  
  methods: {  
    goBack() {  
      uni.navigateTo({  
        url: '/pages/index/index'   
      });  
    },  
    toggleFavorite() {  
      this.isFavorite = !this.isFavorite;  
	  
      console.log('收藏状态切换：', this.isFavorite);  
    },  
    
    onLoad() {  
       this.musicSheetImage = 'http://118.31.104.101:8080/musicPage/songpages/3';  
     }  
  },  
};  
</script>


<style scoped>  
.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100%;  
  padding-top: 50px; 
}  
  
.back-button {  
  position: absolute;  
  top: 20px;  
  left: 20px;  
  z-index: 10;  
  padding: 10px;  
  background-color: #fff;  
  border-radius: 5px;  
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);  
}  
  
.music-sheet-image {  
  width: 90%;  
  height: auto;  
}  
  
.favorite-icon {  
  margin-top: 20px;  
  padding: 10px;  
  background-color: #fff;  
  border-radius: 50%;  
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
  
.favorite-icon image {  
  width: 30px;  
  height: 30px;  
}  
</style>
